<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>画板</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <canvas id="canvas"></canvas>
  <div class="actions" id="actions">
    <svg class="icon active" id="pencil">
      <use xlink:href="#icon-pencil"></use>
    </svg>
    <svg class="icon" id="eraser">
      <use xlink:href="#icon-eraser"></use>
    </svg>
    <svg class="trash" id="trash">
      <use xlink:href="#icon-trash"></use>
    </svg>
    <svg class="download" id="download">
      <use xlink:href="#icon-download"></use>
    </svg>
  </div>
  <div class="thickness" id="thickness"></div>
  <ul class="thicks" id="thicks">
    <li id="thick1" class="thick1 active"></li>
    <li id="thick2" class="thick2"></li>
    <li id="thick3" class="thick3"></li>
  </ul>
  <div class="color" id="color"></div>
  <ul class="colors" id="colors">
    <li id="black" class="black active"></li>
    <li id="red" class="red"></li>
    <li id="orange" class="orange"></li>
    <li id="yellow" class="yellow"></li>
    <li id="green" class="green"></li>
    <li id="cyan" class="cyan"></li>
    <li id="blue" class="blue"></li>
    <li id="purple" class="purple"></li>
  </ul>

  <script>
    window.onload = function () {
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      }, {
        passive: false
      });
      let lastTouchEnd = 0;
      document.addEventListener('touchend', function (event) {
        let now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
    };
  </script>
  <script src="./main.js"></script>
  <script src="//at.alicdn.com/t/font_2876364_qe26qh298qh.js"></script>

</body>

</html>